<template>
	<view>
		<u-navbar placeholder fixed autoBack title="实名认证">
			<view class="d-flex" slot="right">
				<u-icon name="plus" size="20" @click="addRealName"></u-icon>
				<u-icon class="d-m-l-16" name="edit-pen" size="24" @click="(mode = 0), (show = true)"></u-icon>
			</view>
		</u-navbar>
		<d-select :options="options" @query="searchData"></d-select>
		<view class="d-p-30">
			<u-checkbox-group v-model="ids">
				<u-swipe-action class="d-flex-1" ref="action">
					<u-swipe-action-item
						class="d-m-b-30 card2"
						v-for="(item, index) in list"
						:key="item.id"
						:options="_action(item)"
						@click="action($event, item, _action(item))"
						:disabled="show"
						:threshold="30"
					>
						<view class="card d-p-30 d-flex d-flex-1">
							<template v-if="mode != 0">
								<view><u-checkbox shape="circle" :disabled="item.ywzt != 1" :name="item.id"></u-checkbox></view>
							</template>
							<view class="d-flex-1">
								<view class="d-flex" style="color: #5D6672;">
									<view class="d-font-24" style="flex: 3;">
										<text style="">名字</text>
										<text class="d-m-l-20" style="color: #162233;">{{ item.xm }}</text>
									</view>
									<view class="d-font-24" style="flex: 2;">
										<text style="">性别</text>
										<text class="d-m-l-20" style="color: #162233;">{{ item.xb | _xb(dict.xb) }}</text>
									</view>
								</view>
								<view class="d-flex d-m-t-20" style="color: #5D6672;">
									<view class="d-font-24" style="flex: 3;">
										<text style="">工种</text>
										<text class="d-m-l-20" style="color: #162233;">{{ item.zwzc | _worktype(dict.worktype) }}</text>
									</view>
									<view class="d-font-24" style="flex: 2;">
										<text style="">所属区划</text>
										<text class="d-m-l-20" style="color: #162233;">{{ item.districtName }}</text>
									</view>
								</view>
								<view class="d-flex d-m-t-20" style="color: #5D6672;">
									<view class="d-font-24 u-line-1" style="flex: 3;">
										<text style="">证件号码</text>
										<text class="d-m-l-20 " style="color: #162233;">{{ item.zjhm | str }}</text>
									</view>
									<view class="d-font-24" style="flex: 2;">
										<text style="">业务状态</text>
										<text class="d-m-l-20" style="color: #FFB61D;" v-if="item.ywzt == 1">{{ item.ywzt | _ywzt(ywzt) }}</text>
										<text class="d-m-l-20" style="color: #21A5F3;" v-else>{{ item.ywzt | _ywzt(ywzt) }}</text>
									</view>
								</view>
								<view class="d-flex d-m-t-20" style="color: #5D6672;">
									<view class="d-font-24" style="flex: 3;">
										<text style="">项目名称</text>
										<text class="d-m-l-20" style="color: #162233;">{{ item.gcmc }}</text>
									</view>
								</view>
								<view class="d-flex d-m-t-20" style="color: #5D6672;">
									<view class="d-font-24" style="flex: 2;">
										<text style="">班组</text>
										<text class="d-m-l-20" style="color: #162233;">{{ item.bzmc }}</text>
									</view>
								</view>
							</view>
						</view>
					</u-swipe-action-item>
				</u-swipe-action>
			</u-checkbox-group>
			<template v-if="!list || list.length <= 0">
				<view style="padding-top: 16vh;"><u-empty icon="/static/image/none.png" :text="'暂无数据'"></u-empty></view>
			</template>
		</view>

		<view class="bottom u-safe-area-inset-bottom" v-if="show">
			<view class="u-safe-area-inset-bottom d-flex u-border-top">
				<template v-if="mode == 0">
					<view class="d-flex-1 d-m-r-20"><u-button text="取消" @click="(mode = 0), (show = false)"></u-button></view>
					<view class="d-flex-1 d-m-r-20"><u-button text="业务提交" @click="mode = 1"></u-button></view>
					<view class="d-flex-1"><u-button text="业务删除" @click="mode = 2"></u-button></view>
				</template>
				<template v-else-if="mode == 1">
					<view class="d-flex-1 d-m-r-20"><u-button text="取消" @click="(mode = 0), (show = false)"></u-button></view>
					<view class="d-flex-1"><u-button text="提交" @click="showSubmit = true"></u-button></view>
				</template>
				<template v-else>
					<view class="d-flex-1 d-m-r-20"><u-button text="取消" @click="(mode = 0), (show = false)"></u-button></view>
					<view class="d-flex-1"><u-button text="删除" @click="showDelete = true"></u-button></view>
				</template>
			</view>
		</view>

		<u-modal :show="showDelete" :showCancelButton="true" title="温馨提示" content="此操作不可逆, 是否确认删除该数据?" @cancel="showDelete = false" @confirm="del"></u-modal>
		<u-modal
			:show="showSubmit"
			:showCancelButton="true"
			title="温馨提示"
			content="此操作不可逆, 是否确认提交该业务数据?"
			@cancel="showSubmit = false"
			@confirm="submit"
		></u-modal>
	</view>
</template>

<script>
import { ssdwList, getDict, authlist, submitRyxxSmrz, deleteRyxxSmrz } from '../../../common/api.js';
export default {
	data() {
		return {
			options: [],
			queryParams: {},
			dict: {
				xb: [],
				worktype: []
			},
			ywzt: [],
			list: [],
			pageNum: 1,
			pageSize: 20,
			pageLast: 1,
			show: false,
			showDelete: false,
			showSubmit: false,
			ids: [],
			mode: 0 // 0 默认模式 1多选提交 2多选删除
		};
	},
	watch: {
		show(v) {
			if (v) {
				this.ids = [];
				this.$refs.action.closeOther();
			}
		}
	},
	onLoad() {
		let ywzt, deptId;

		getDict({
			name: 'xb'
		}).then(e => {
			this.dict.xb = e.data.map(e => {
				return {
					id: e.dictValue,
					label: e.dictLabel
				};
			});
		});
		getDict({
			name: 'worktype'
		}).then(e => {
			this.dict.worktype = e.data.map(e => {
				return {
					id: e.dictValue,
					label: e.dictLabel
				};
			});
		});
		getDict({
			name: 'ywzt'
		})
			.then(e => {
				ywzt = e.data.map(e => {
					return {
						id: e.dictValue,
						label: e.dictLabel
					};
				});
				this.ywzt = ywzt;
				return ssdwList({
					params: {
						gcbh: this.$user.ssgcxx[this.$appIndex].gcbh, // 所属项目编号
						deptId: this.$user.ssgcxx[this.$appIndex].deptId // 所属部门编号
					}
				});
			})
			.then(e => {
				deptId = e.data.map(e => {
					return {
						id: e.deptId,
						label: e.deptName
					};
				});
				this.options = [
					{
						label: '所属单位',
						name: 'deptId',
						children: deptId
					},
					{
						label: '业务状态',
						name: 'ywzt',
						children: ywzt
					}
				];
			});
	},
	onReachBottom() {
		if (this.pageLast > this.pageNum) {
			++this.pageNum;
			this.getData().then(e => {
				this.list = this.list.concat(e.data);
			});
		}
	},
	onShow() {
		this.init();
	},
	methods: {
		init() {
			this.pageNum = 1;
			this.getData().then(e => {
				this.list = e.data;
				this.pageLast = Math.ceil(e.total / this.pageSize);
			});
		},
		getData() {
			return authlist({
				params: {
					...this.queryParams,
					bzid: this.$user.ssgcxx[this.$appIndex].bzid,
					gcbh: this.$user.ssgcxx[this.$appIndex].gcbh,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
			});
		},
		searchData(e) {
			this.queryParams = e;
			this.init();
		},
		addRealName() {
			uni.removeStorageSync('idCardBase64Fan');
			uni.removeStorageSync('idCardBase64');
			uni.removeStorageSync('auth_photo');
			uni.removeStorageSync('store_form');
			uni.$u.route({
				url: '/pages/index/member/addRealName'
			});
		},
		action(e, item, option) {
			if (option[e.index].name == 'delete') {
				this.ids = [item.id];
				this.showDelete = true;
			} else if (option[e.index].name == 'submit') {
				this.ids = [item.id];
				this.showSubmit = true;
			} else if (option[e.index].name == 'edit') {
				this.$refs.action.closeOther();
				uni.removeStorageSync('idCardBase64Fan');
				uni.removeStorageSync('idCardBase64');
				uni.removeStorageSync('auth_photo');
				uni.removeStorageSync('store_form');
				uni.$u.route({
					url: '/pages/index/member/addRealName',
					params: {
						id: item.id
					}
				});
			} else if (option[e.index].name == 'show') {
				this.$refs.action.closeOther();
				uni.$u.route({
					url: '/pages/index/member/showRealName',
					params: {
						id: item.id
					}
				});
			}
		},
		del() {
			this.showDelete = false;
			this.$refs.action.closeOther();
			if (this.ids.length <= 0) {
				return uni.$u.toast('请选择要操作的数据');
			}
			deleteRyxxSmrz({
				id: this.ids.join(',')
			}).then(e => {
				this.show = false;
				this.mode = 0;
				uni.$u.toast('删除成功');
				this.init();
			});
		},
		submit() {
			this.showSubmit = false;
			this.$refs.action.closeOther();
			if (this.ids.length <= 0) {
				return uni.$u.toast('请选择要操作的数据');
			}
			submitRyxxSmrz({
				id: this.ids.join(',')
			}).then(e => {
				this.show = false;
				this.mode = 0;
				uni.$u.toast('提交成功');
				this.init();
			});
		}
	},
	computed: {
		_action() {
			return function(item) {
				if (item.ywzt == 1) {
					return [
						{
							text: '提交',
							name: 'submit',
							style: {
								backgroundColor: '#f9ae3d',
								fontSize: '26rpx'
							}
						},
						{
							text: '编辑',
							name: 'edit',
							style: {
								backgroundColor: '#3c9cff',
								fontSize: '26rpx'
							}
						},
						{
							text: '删除',
							name: 'delete',
							style: {
								backgroundColor: '#f56c6c',
								fontSize: '26rpx'
							}
						}
					];
				} else {
					return [
						{
							text: '查看',
							name: 'show',
							style: {
								backgroundColor: '#3c9cff',
								fontSize: '26rpx'
							}
						}
					];
				}
			};
		}
	},
	filters: {
		_xb(e, x) {
			try {
				return x.filter(item => {
					return item.id == e;
				})[0].label;
			} catch (e) {
				return '';
			}
		},
		_worktype(e, x) {
			try {
				return x.filter(item => {
					return item.id == e;
				})[0].label;
			} catch (e) {
				return '';
			}
		},
		_ywzt(e, x) {
			try {
				return x.filter(item => {
					return item.id == e;
				})[0].label;
			} catch (e) {
				return '';
			}
		}
	}
};
</script>

<style lang="scss">
.d-sel {
	position: fixed;
	left: 0;
	right: 0;
	background-color: #ffffff;
	z-index: 999;
	& > view {
		height: 68rpx;
	}
	box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
	.u-border-right {
		border-color: #eeeeee !important;
	}
}
.card {
	box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
	border-radius: 10rpx;
	background-color: #ffffff;
}
.card2 {
	box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
	border-radius: 10rpx;
}
page {
	background-color: #fbfcfc;

	.bottom {
		height: 140rpx;
		box-sizing: content-box;
		& > view {
			height: 140rpx;
			position: fixed;
			z-index: 9999;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #ffffff;
			padding-left: 30rpx;
			padding-right: 30rpx;
		}
	}
}
</style>
